<template>
  <el-row :gutter="20">
    <el-col
      :span="12"
      :offset="6"
    >
      <div class="grid-content bg-purple">
        <div class="wrap">
          <i class="mark">✲</i>
          <span class="font">统一社会信用代码：</span>
          <el-input
            placeholder="请输入统一社会信用代码"
            v-model="creditCode"
            clearable
            class="conent"
            @change="checkCreditCode"
          >
          </el-input>
        </div>
        <div class="wrap">
          <i class="mark">✲</i>
          <span class="font">公司全称：</span>
          <el-input
            placeholder="请输入公司全称"
            v-model="companyNames"
            clearable
            class="conent"
            @change="checkCompanyNames"
          >
          </el-input>
        </div>
        <div class="wrap">
          <span class="font">公司简称：</span>
          <el-input
            placeholder="请输入公司简称"
            v-model="companyName"
            clearable
            class="conent"
            @change="checkCompanyName"
          >
          </el-input>
        </div>
        <div class="wrap wrap-change">
          <i class="mark">✲</i>
          <span class="font">营业执照照片：</span>
          <div class="block photo">
            <span class="demonstration">营业执照</span>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="businessLicense"
                :src="businessLicense"
                class="avatar"
              >
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i>
            </el-upload>
          </div>
          <div class="block sample">
            <span class="demonstration">示例</span>
            <el-image :src="src"></el-image>
          </div>
          <span class="font-tip1">1、请上传加盖公章的营业执照扫描件照片。</span>
          <span class="font-tip2">2、避免边框缺失、字体模糊、闪光、光线过暗、遮挡信息等情况。</span>
          <span class="font-tip3">3、15M以内，jpg、png格式。</span>
        </div>
        <div class="wrap">
          <i class="mark">✲</i>
          <span class="font">公司座机电话：</span>
          <el-input
            placeholder="请输入公司座机电话"
            v-model="landline"
            clearable
            class="conent"
            @change="checkLandline"
          >
          </el-input>
        </div>
        <div class="wrap">
          <i class="mark">✲</i>
          <span class="font">公司联系人姓名：</span>
          <el-input
            placeholder="请输入公司联系人姓名"
            v-model="contactName"
            clearable
            class="conent"
            @change="checkContactName"
          >
          </el-input>
        </div>
        <div class="wrap">
          <i class="mark">✲</i>
          <span class="font">公司联系人电话：</span>
          <el-input
            placeholder="请输入公司联系人电话"
            v-model="contactPhone"
            clearable
            class="conent"
            @change="checkContactPhone"
          >
          </el-input>
        </div>
        <div class="wrap">
          <i class="mark">✲</i>
          <span class="font">联系人邮箱：</span>
          <el-input
            placeholder="请输入联系人邮箱"
            v-model="contactEmail"
            clearable
            class="conent"
            @change="checkContactEmail"
          >
          </el-input>
        </div>
        <div class="wrap">
          <i class="mark">✲</i>
          <span class="font">公司联系地址：</span>
          <el-input
            placeholder="请输入公司联系地址"
            v-model="contactAddress"
            clearable
            class="conent"
            @change="checkContactAddress"
          >
          </el-input>
        </div>
        <div class="wrap">
          <span class="font">公司网站：</span>
          <el-input
            placeholder="请输入公司网站"
            v-model="companyWeb"
            clearable
            class="conent"
            @change="checkCompanyWeb"
          >
          </el-input>
        </div>
        <div
          class="wrap change-wrap"
          style="height:55px;"
        >
          <span class="font">公司简介：</span>
          <el-input
            placeholder="请输入公司简介"
            v-model="companyProfile"
            clearable
            maxlength="150"
            show-word-limit
            type="textarea"
            class="conent"
            required
          >
          </el-input>
        </div>
        <div
          class="wrap wrap-change-logo"
          style="height:100px;"
        >
          <i class="mark">✲</i>
          <span class="font">公司logo：</span>
          <div class="block photo">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccessLogo"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="logo"
                :src="logo"
                class="avatar"
              >
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i>
            </el-upload>
          </div>
        </div>
        <el-button
          type="primary"
          class="sub-btn"
          @click="submitAudit"
        >提交审核</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      src:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      creditCode: "",
      companyNames: "",
      companyName: "",
      businessLicense: "",
      landline: "",
      contactName: "",
      contactPhone: "",
      contactEmail: "",
      contactAddress: "",
      companyWeb: "",
      companyProfile: "",
      logo: ""
    };
  },
  methods: {
    checkCreditCode() {
      let reg = /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g;
      if (!reg.test(this.creditCode)) {
        this.$message.error("请输入正确的统一社会信用代码");
        this.creditCode = "";
      }
    },
    checkCompanyNames() {
      let reg = /^[\u4e00-\u9fa5\(\)（）\da-zA-Z&]{2,25}$/gi;
      if (!reg.test(this.companyNames)) {
        this.$message.error("请输入正确的公司名称最低2个字符最高25个字符");
        this.companyNames = "";
      }
    },
    checkCompanyName() {
      let reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/;
      if (!reg.test(this.companyName)) {
        this.$message.error("请输入正确的公司简称最低2个字符最高10个字符");
        this.companyNames = "";
      }
    },
    checkLandline() {
      let reg = /0\d{2,3}-\d{7,8}|\(?0\d{2,3}[)-]?\d{7,8}|\(?0\d{2,3}[)-]*\d{7,8}/;
      if (!reg.test(this.landline)) {
        this.$message.error("请输入正确的座机号码");
        this.landline = "";
      }
    },
    checkContactName() {
      let reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/;
      if (!reg.test(this.contactName)) {
        this.$message.error("请输入正确的姓名");
        this.contactName = "";
      }
    },
    checkContactPhone() {
      let reg = /^[1]([3-9])[0-9]{9}$/;
      if (!reg.test(this.contactPhone)) {
        this.$message.error("请输入正确的手机号");
        this.contactPhone = "";
      }
    },
    checkContactEmail() {
      let reg = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
      if (!reg.test(this.contactEmail)) {
        this.$message.error("请输入正确的邮箱");
        this.contactEmail = "";
      }
    },
    checkContactAddress() {
      let reg = /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g;
      if (!reg.test(this.contactAddress)) {
        this.$message.error("请输入正确的联系地址");
        this.contactAddress = "";
      }
    },
    checkCompanyWeb() {
      let reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/;
      if (!reg.test(this.companyWeb)) {
        this.$message.error("请输入正确的网址");
        this.companyWeb = "";
      }
    },
    submitAudit() {
      let arr = [
        this.creditCode,
        this.companyNames,
        this.businessLicense,
        this.landline,
        this.contactName,
        this.contactPhone,
        this.contactEmail,
        this.contactAddress,
        this.logo
      ];
      let acount = 0;
      arr.forEach(item => {
        if (!item) {
          acount++;
        }
      });
      if (acount !== 0) {
        this.$message.error("请检查提交内容");
      }
      // console.log(
      //   this.creditCode,
      //   this.companyNames,
      //   this.companyName,
      //   this.businessLicense,
      //   this.landline,
      //   this.contactName,
      //   this.contactPhone,
      //   this.contactEmail,
      //   this.contactAddress,
      //   this.companyWeb,
      //   this.companyProfile,
      //   this.logo
      // );
    },
    handleAvatarSuccess(res, file) {
      this.businessLicense = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccessLogo(res, file) {
      this.logo = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt15M = file.size / 1024 / 1024 <= 15;
      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
      }
      if (!isLt15M) {
        this.$message.error("上传图片大小不能超过 15MB!");
      }
      return (isJPG && isLt15M) || (isLt15M && isPNG);
    }
  }
};
</script>

<style lang="css" scoped>
.wrap-change-logo {
  height: 100px;
}
.change-wrap {
  height: 100px;
}
.block {
  width: 150px;
  height: 100px;
}
.sub-btn {
  margin-top: 10px;
  margin-bottom: 10px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 5px;
}
.bg-purple-dark {
  background: white;
}
.bg-purple {
  background: white;
  text-align: center;
}
.grid-content {
  padding-top: 10px;
  border-radius: 4px;
  min-height: 35px;
  text-align: center;
}
.wrap {
  width: 600px;
  height: 40px;
  position: relative;
  margin-left: 150px;
  margin-top: 15px;
}
.wrap-change {
  height: 210px;
  position: relative;
}
.sample {
  position: absolute;
  top: 10px;
  left: 400px;
}
.photo {
  position: absolute;
  top: 10px;
  left: 160px;
}
.font-tip1 {
  position: absolute;
  top: 145px;
  left: 125px;
}
.font-tip2 {
  position: absolute;
  top: 165px;
  left: 125px;
}
.font-tip3 {
  position: absolute;
  top: 185px;
  left: 125px;
}
.font {
  position: absolute;
  top: 10px;
  left: 10px;
}
.conent {
  position: absolute;
  top: 0px;
  left: 155px;
  width: 400px;
}
.mark {
  position: absolute;
  top: 10px;
  left: -10px;
  color: red;
}
.avatar-uploader .el-upload {
  border: 1px dashed black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #fd0000;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #fd0000;
  width: 150px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 100px;
  display: block;
}
</style>